<template>
  <view class="loginType allColumnCenter">
    <header-title title="手机号登录" :is-display-back="true"></header-title>
    <view class="tips mt-146">
      <text class="tips_overText">手机号登录/注册</text>
    </view>
    <view class="tips mt-18">
      <text class="tips_littleText">首次登录会自动注册</text>
    </view>
    <view class="page-form">
      <view class="item">
        <input type='number' placeholder='填写手机号码' placeholder-class='placeholder' v-model="phone"
               :maxlength="11"></input>
      </view>
      <view class="item acea-row row-between-wrapper">
        <input type='number' placeholder='填写验证码' placeholder-class='placeholder' :maxlength="4"
               class="codeIput" v-model="captcha"></input>
        <view class="line">
        </view>
        <button class="code font-num" :class="disabled === true ? 'on' : ''" :disabled='disabled' @click="code">
          {{ text }}
        </button>
      </view>
      <view class="btn mt-191" @click="submitData">
        {{  '立即登录' }}
      </view>
    </view>
  </view>
</template>

<script>
import HeaderTitle from "../../components/shiqinComponents/pageComponents/headerTitle.vue";

export default {
  components: {HeaderTitle},
  data() {
    return {
      captcha:'',
      disabled:false,
      phone:'',
      text:'获取验证码',
      // 是否是新用户
      isNewUsers:true
    };
  },
  methods: {
    code(){

    },
    submitData(){
      if(this.isNewUsers){
        this.$nav.reLaunch('/pages/loginType/selectGender')
      }else{
        this.$nav.swichNav('/pages/family/index')
      }
    }
  },
}
</script>

<style lang="scss">
.loginType {
  width: 750rpx;
  min-height: 100vh;
  overflow: hidden;

  .tips {
    width: 660rpx;

    &_overText {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 48rpx;
      color: #4B4B4B;
    }

    &_littleText {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 28rpx;
      color: #4B4B4B;
    }
  }

  .page-form {
    width: 648rpx;
    margin: 100rpx auto 0 auto;
    z-index: 2;
    position: relative;
    .item {
      width: 100%;
      height: 88rpx;
      background: #F5F5F5;
      border-radius: 45rpx;
      padding: 24rpx 48rpx;
      margin-bottom: 32rpx;

      input {
        width: 100%;
        height: 100%;
        font-size: 32rpx;
      }

      .placeholder {
        color: #BBBBBB;
        font-size: 28rpx;
      }

      input.codeIput {
        width: 300rpx;
      }

      .line {
        width: 2rpx;
        height: 28rpx;
        background: #CCCCCC;
      }

      .code {
        font-size: 28rpx;
        color:#FF7950 !important;
        background-color: rgba(255, 255, 255, 0);
      }

      .code.on {
        color: #BBBBBB !important;
      }
    }

    .btn {
      width: 648rpx;
      height: 88rpx;
      background: $theme-color;
      border-radius: 200rpx 200rpx 200rpx 200rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 32rpx;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #FFFFFF;
      line-height: 44rpx;
      letter-spacing: 1px;
    }
  }
}
</style>
